<script lang="ts" setup>
import {FileTagEntity} from "../api/file";

const props = defineProps({
  file: FileTagEntity
});

const fileClass = computed(() => {
  if (props.file) {
    return `fiv-viv fiv-icon-blank fiv-icon-${props.file.getNameAndExt()[1].replace('.', '')}`
  } else {
    return `fiv-viv fiv-icon-blank`
  }
});

</script>

<template>
  <el-badge v-if="file.isDisk()" is-dot :type="file.isOnline ? 'success':'info' ">
    <el-icon :size="50" class="fiv-viv disk"/>
  </el-badge>
  <el-icon :size="50" v-else-if="file.isDirectory()" class="fiv-viv fiv-icon-folder"/>
  <el-icon :size="50" v-else :class="fileClass"/>
</template>

<style scoped>
@import "file-icon-vectors/dist/file-icon-vectors.min.css";

.disk {
  background-image: url("./disk.svg");
}
</style>
